<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-03-20 13:51:35
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-05-06 09:10:03
 * @FilePath: \questionnaire-system-admin\src\views\ErrorPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="error-page-box">
    <div class="contant">
      <div class="left">
        <el-image :src="erroImage" fit="cover" style="width: 538px; height: 482px;"></el-image>
      </div>
      <div class="right">
        <div class="name">抱歉, 您访问的系统正在维护中</div>
        <div class="tips">可能原因：网络信号不好、网址已失效…<br />请检查地址是否正确，或刷新页面。</div>
        <!-- <el-button type="primary" size="large" style="font-size: 20px;">刷新页面</el-button> -->
        <el-button type="primary" size="large" @click="$router.go(-1)" style="font-size: 20px;">返回上一页</el-button>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import Footer from '../components/Common/Footer.vue'
import erroImage from '../assets/images/404.png'
onMounted(() => { })
</script>
<style lang='scss' scoped>
.error-page-box {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .contant {
    display: flex;
    align-items: center;

    .left {}

    .right {
      flex: 1;
      margin-left: 80px;

      .name {
        font-size: 32px;
        font-weight: bold;
        color: #333333;
      }

      .tips {
        font-size: 20px;
        color: #666666;
        margin: 40px 0;
      }
      .refresh{

      }
    }
  }

  .hl-footer-box {
    position: absolute;
    bottom: 10px;
    background-color: transparent;
  }
}
</style>